<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>注册手机号</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				background-color: #FFFFFF;
			}
			.mui-content {
				background-color: #FFFFFF;
			}
			.login-info {
				margin: 45px 10px 0px 10px;
			}
			.item-input {
				width: 100%;	
			}
			input[type=text] {
				margin-bottom: 0px;
				padding: 0px;
			}
			input[type=password] {
				margin-bottom: 0px;
				padding: 0px;
			}
			.item-input img{
				height: 24px;
				vertical-align: middle;
			}
			.input-border {
				width: 85%;
				display: inline-block;
				position: relative;
				margin-bottom: 20px;
				margin-left: 10px;
				border-bottom: 1px solid #D9D8D9;
			}
			.input-border input {
				display: inline-block;
				width: 60%;
				vertical-align: middle;
				background-color: transparent;
				border: none;
				box-shadow: none;
				font-size: 16px;
				color: #666666;
			}
			.division-span {
				line-height: 40px;
				font-size: 20px;
				color: #CCCCCC;
			}
			.tips-span {
				height: 40px;
				margin-left: 5px;
				font-family: 'PingFangSC-Regular';
				font-size: 16px;
				color: #5BA9F9;
				border-width: 0px;
			}
			.code-div {
				display: inline-block;
				float: right;
			}
			.login-button {
				margin-top: 50px;
				text-align: center;
			}
			.confirm-btn {
				width: 300px;
				height: 45px;
				background: #5BA9F9;
				border-radius: 4px;
				font-size: 20px;
				color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册手机号</h1>
		</header>
		<div class="mui-content">
			<div class="login-info">
				<div class="item-input">
					<img src="../img/applicant/phone_icon.png" />
					<div class="input-border">
						<input type="text" id="phone" class="form-control" placeholder="请输入手机号">
					</div>
				</div>
				<div class="item-input">
					<img src="../img/applicant/defense_icon.png" />
					<div class="input-border">
						<input type="text" id="code" class="form-control" placeholder="请输入验证码">
						<div class="code-div">
							<span class="division-span">|</span>
							<button class="tips-span" onclick="getVerificationCode(this)">获取验证码</button>
						</div>
					</div>
				</div>
				<div class="item-input">
					<img src="../img/applicant/defense_icon.png" />
					<div class="input-border">
						<input type="password" id="password" class="form-control" placeholder="请输入密码">
					</div>
				</div>
				<div class="login-button">
					<button type="button" class="confirm-btn">注&nbsp;&nbsp;册</button>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js"></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var userID = base.getParameter("userID");
		var customerId = 23;
		var countdown=60;
		//构造一个倒计时函数叫settime
		function setTime(obj) {
		    //开始判断倒计时是否为0
		    if (countdown == 0) {
		        obj.removeAttribute("disabled");
		        obj.innerHTML="重新发送";
		        countdown = 60;
		        //立即跳出settime函数，不再执行函数后边的步骤
		        return;
		    } else {
		        obj.setAttribute("disabled", true);
		        obj.innerHTML=countdown+'s';
		        countdown--;
		    }
		  	//过1秒后执行倒计时函数
		  	setTimeout(function() {setTime(obj)},1000)
		}
		function getVerificationCode(obj) {
			if(!testPhone($("#phone").val())) {
				mui.toast("请输入正确的手机号码");
				return;
			}
			$(this).attr("disabled", true);
			var url = base.url.sendVerificationCode;
			var data = {
				phone:$("#phone").val(),
				type : 4,
			};
			base.postData(url,data,getVerificationCodeSuccess.bind(null,obj));
		}
		function getVerificationCodeSuccess(obj,data) {
			if(data.success) {
				setTime(obj);
			} else {
				mui.toast(data.message);
			}
		}
		$('.login-button').on('tap', 'button', function() {
			base.setWait('正在提交数据');
			var url = base.url.customerRegistered;
			var data = {
				phone:$("#phone").val(),
				password:$("#password").val(),
				code : $("#code").val()
			};
			base.postData(url,data,customerRegisteredSuccess);
		})
		function customerRegisteredSuccess(data) {
			if(data.success) {
				mui.toast(data.message);
				window.location.href = "login.html";
			} else {
				mui.toast(data.message);
			}
		}
	</script>
</html>